<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <link rel="stylesheet" href="http://vjs.zencdn.net/5.5.3/video-js.css">
    <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.js"></script>

</head>

<body>

    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="728"
        height="410" data-setup='{}'>
        <source id="source" src="http://10.1.22.8/hls/1234.m3u8" type="application/x-mpegURL">
    </video>

</body>

<script>

    // videojs 简单使用

    var myVideo = videojs('myVideo', {

        bigPlayButton: true,

        textTrackDisplay: false,

        posterImage: false,

        errorDisplay: false,

    })

    myVideo.play() // 视频播放

    myVideo.pause() // 视频暂停

</script>

</html>